// src/components/ProjectGrid.jsx
import React from 'react';
import { Link } from 'react-router-dom';
import TechIcons from './TechIcons';

// 项目类型常量
const PROJECT_TYPES = {
  PERSONAL: '个人',
  COMPANY: '公司'
};

// 项目状态常量
const PROJECT_STATUS = {
  DEVELOPING: '开发中',
  COMPLETED: '已完成',
  ABANDONED: '已废弃'
};

const ProjectGrid = ({ projects }) => {
  // 将API返回的项目类型转换为显示文本
  const getProjectTypeText = (type) => {
    return PROJECT_TYPES[type] || type;
  };

  // 将API返回的技术分类转换为技术栈数组
  const getTechStack = (category) => {
    switch (category) {
      case 'JAVA': return ['Java'];
      case 'KOTLIN': return ['Kotlin'];
      case 'PYTHON': return ['Python'];
      case 'REACT': return ['React'];
      case 'FLUTTER': return ['Flutter'];
      case 'ANDROID': return ['Android'];
      default: return [category];
    }
  };

  // 将API返回的项目状态转换为显示文本
  const getProjectStatusText = (status) => {
    return PROJECT_STATUS[status] || status;
  };

  return (
    <div className="projects-grid">
      {projects.map(project => (
        <Link
          to={`/project/${project.id || project.userId}`}
          key={project.id || project.userId}
          className="project-card-link"
        >
          <div className="module-card">
            <div className="card-header">
              <div className="tech-badge-group">
                <TechIcons techs={getTechStack(project.techCategory)} />
              </div>
              <h3 className="project-title">{project.projectName || project.title}</h3>
            </div>
            <p className="project-description">{project.projectDesc || project.description || '暂无描述'}</p>
            <div className="project-meta">
              <span className="project-type">{getProjectTypeText(project.projectType)}</span>
              <span className="project-status">{getProjectStatusText(project.projectStatus)}</span>
            </div>
          </div>
        </Link>
      ))}
    </div>
  );
};

export default ProjectGrid;